<template>
    <div>
        <el-container>
            <el-main>
                <div class="login_panle">
                    <br />
                    <h4 style="margin-top: 8px">系统登录</h4>
                    <el-form label-position="right" label-width="60px" :model="user">
                        <el-form-item label="用户">
                            <el-input v-model="user.username"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input type="password" v-model="user.password"></el-input>
                        </el-form-item>
                        <el-button type="primary" @click="onSubmit">登录</el-button>
                    </el-form>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import axios from 'axios';
    import serverUrl from '../config/config.js'
    export default {
        name:'Login',
        data() {
            return {
                user: {
                    username: 'admin',
                    password: 'admin'
                }
            }
        },
        methods: {
            onSubmit() {
                let _this = this;
                axios.get(serverUrl+'/login',{params:_this.user}).then(response=>{
                    console.log('+++++++>',response.data);
                    if(response.data!=='') {
                        localStorage.setItem('access-admin',JSON.stringify(response.data)) // 使用浏览器本地存储保存token信息
                        console.log('======>',response.data);
                        this.$router.push('/home'); // 路由跳转
                    }else{
                        alert("登陆失败！！！");
                    }
                });
            }
        }
    }
</script>

<style>
    .login_panle {
        width: 400px;
        height: 290px;
        margin: 100px auto;
        border-radius: 10px;
        box-shadow: 0 0 16px gray;
        text-align: center;
    }
    .el-input {
        width: 90%;
    }
</style>